<template>
  <div id="login">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <!-- card body -->
      <el-form
        :model="login_form"
        ref="login_form"
        :rules="login_rules"
        label-width="0px"
        :inline="false"
        size="normal"
        @submit.native.prevent
      >
        <el-form-item>
          <h1
            style="
              display: inline-block;
              font-size: 2rem;
              color: white;
              width: 100%;
            "
          >
            <!-- card title -->
            欢迎登录智慧公寓管理平台
          </h1>
        </el-form-item>
        <el-form-item label="" prop="account">
          <el-input
            v-model="login_form.account"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
            type="password"
            show-password
            prefix-icon="el-icon-lock"
            v-model="login_form.password"
          ></el-input>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-row :gutter="10" style="width: 80%; margin: 0 auto">
            <el-col :span="12" :offset="0"
              ><el-popover placement="bottom" trigger="click">
                <el-button
                  type="success"
                  size="default"
                  icon="el-icon-chat-dot-round"
                  @click="wechat.dialog_status = true"
                  slot="reference"
                  class="login_btn"
                  >微信登录</el-button
                >
                <div id="wechat_qr"></div> </el-popover
            ></el-col>
            <el-col :span="12" :offset="0"
              ><el-button
                style="background: #6260e2"
                class="login_btn"
                @click="login()"
                native-type="submit"
                type="primary"
                >登录</el-button
              ></el-col
            >
          </el-row>
        </el-form-item>
      </el-form>
    </el-card>

    <div id="foot">粤ICP备2021112862号</div>
  </div>
</template>

<script>
import utils from "@/store/utils.js";

export default {
  data() {
    return {
      login_form: {
        account: "",
        password: "",
      },
      login_rules: {
        account: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      wechat: {
        dialog_status: false,
      },
    };
  },
  methods: {
    login() {
      this.$refs["login_form"].validate((valid) => {
        if (valid) {
          localStorage.removeItem("Authorization");
          this.$axios
            .post("/api/adminapi/signin", {
              username: this.login_form.account,
              password: this.$AES.encrypt(this.login_form.password),
              signin_type: "pc",
            })
            .then((res) => {
              // 解密用户类型和激活状态
              if (res.data.ret == 0) {
                let usertype = res.data.usertypen;
                let is_active = res.data.is_active;
                let username = res.data.username;
                let token = res.data.token;
                let mode = res.data.user_mode;
                let userid = res.data.userid;
                this.getUnionid(username, token).then((unionid) => {
                  // 相关信息放入缓存
                  this.$store.dispatch("login", {
                    username,
                    token,
                    usertype,
                    is_active,
                    unionid,
                    mode,
                    userid
                  });
                  let usertype_int = parseInt(this.$AES.decrypt(usertype));
                  if (usertype_int >= 0) {
                    this.$router.push("/mgr/communitymanagement");
                    this.$message.success("登录成功");
                  }
                });
                // 登录失败
              } else if (res.data.ret == 1 || res.data.ret == 3) {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {});
        }
      });
    },
    initWechatQr() {
      let obj = new WxLogin({
        id: "wechat_qr",
        appid: "wx7870d5e16708e05e",
        scope: "snsapi_login",
        redirect_uri: utils.urlencode(
          "https://www.liandunkaoqin.com/LoginRedirect"
        ),
      });
    },
    async getUnionid(username, token) {
      return new Promise((resolve) => {
        this.$axios({
          method: "post",
          url: "/api/adminapi/gettotal",
          headers: {
            Authorization: token,
          },
          data: {
            control: "openid", //控制参数，根据参数选择操作（
            username: username,
          },
        }).then((res) => {
          if (res.data.ret == 0) {
            resolve(res.data.total[0].openid);
          }
        });
      });
    },
  },
  mounted() {
    this.login_form.account = this.$store.state.username;
    this.initWechatQr();
  },
};
</script>

<style scoped>
#foot {
  position: absolute;
  bottom: 10px;
  left: 0;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  width: 100%;
}

.login_btn {
  width: 100%;
  height: 40px;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  font-size: 1.3em;
  border-radius: 5px;
  margin-top: 20px;
}

#login {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(135deg, #43cbff 10%, #9708cc 100%);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  position: relative;
}

.el-input {
  width: 80%;
  border: 0;
  border-bottom: 1px #fff solid;
}

.el-card {
  width: 500px;
  position: relative;
  top: 50%;
  margin: 0 auto;
  transform: translateY(-50%);
  text-align: center;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

h1 {
  margin: 0;
}
</style>

<style>
#login .el-card__header {
  padding: 5px 0;
  border: none;
}

#login .el-form-item__label {
  color: #163c69;
  font-size: 15px;
}

#login .el-form-item__error {
  left: 10%;
}

#login .el-input__inner {
  background: none;
  color: #fff;
  font-size: 18px;
  border-radius: 0;
  box-shadow: #000;
  border: 0;
  cursor: default;
}
#login .el-input__prefix i {
  color: #fff;
  font-size: 18px;
}

#login .el-form-item__error {
  color: #fff;
  font-size: 16px;
}
</style>
